<template>
    <div class="readCardDialog">


        <!--弹框：读卡-->
        <div class="blackBg duKaBg" v-if="dialogVisible">
            <div class="panel-default">
                <em class="closes" @click="closeDialog">×</em>
                <div class="panel-heading">刷卡操作</div>
                <ul class="oUl">
                    <li
                            :class="ulindex == index ?'high':''"
                            v-for="(item,index) in OuList"
                            :key="index"
                            @click="getList(item,index)"
                    >{{item.name}}
                    </li>
                </ul>
                <div class="oMain">
                    <!--院内卡-->
                    <div v-if="ulindex == 0">
                        <p>
                            <span>卡号：</span>
                            <input type="text" class="form-control" style="width: 160px" v-model="Card_no_Node"/>
                            <button class="btn btn-info" @click="executeServeID">读卡</button>
                        </p>
                        <p style="color:blue">请将卡片在读卡器的卡槽中划一下进行读卡。</p>
                    </div>
                    <!--二维码-->
                    <div v-if="ulindex == 1">
                        <div class="showArea">二维码区域</div>
                    </div>
                    <!--人脸识别-->
                    <div v-if="ulindex == 2">
                        <div class="showArea">人脸识别区域</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'print',
        props: {
            isShow: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                dialogVisible: this.isShow,
                MsgType: 0,
                Card_no_Node: "", //读卡卡号
                OuList: [{name: "院内卡"}, {name: "二维码"}, {name: "人脸识别"}],
                ulindex: 0,
                sendCardMsg: {
                    SevAddress: "服务器地址+端口号,示例(http://127.0.0.1:7777)",
                    Token: "登录后的Token",
                    Code: "ReadCard",
                    Input: {CardType: "卡类型"}
                },

            }
        },
        methods: {
            getList(i, j) {
                console.log(i);
                this.ulindex = j;
            }
            ,
            closeDialog() {
                this.dialogVisible = false
                this.$emit('closeDialogFather', this.dialogVisible);
            },
            sureDialog() {
                this.$emit('sureDialogFather');
            },


            /*****************************读卡*******************************************************/
            executeServeID() {
                this.MsgType = 1;
                this.sendCardMsg.Input.CardType = "1";
                var sendMsg = JSON.stringify(this.sendCardMsg);
                this.$scanIdCard(sendMsg, this.getMsg);
            }
            ,
            getMsg(msg) {
                console.log("采集信息");
                console.log(msg);
                if (msg != null) {
                    var msgObj = JSON.parse(msg);
                    switch (this.MsgType) {
                        case 1:
                            this.Card_no_Node = msgObj.cardno
                            this.$emit('Readcard', this.Card_no_Node);
                            break

                    }
                }
            }
            ,


        },
        watch: {
            isShow() {
                this.dialogVisible = this.isShow;
                console.log(this.dialogVisible)
            }
        },
        mounted() {
        },


    }
</script>
<style lang="scss">
    .readCardDialog {
        /*读卡*/
        .duKaBg {
            .panel-default {
                width: 600px;
                height: 400px;
                margin: 30px auto;
                background: #fff;
                border-radius: 5px;
                position: relative;
            }

            .oUl {
                padding: 9px 15px 0 15px;
                height: 42px;
                margin-bottom: 0;
                border-bottom: 1px solid #ddd;
            }

            .oUl .high {
                background: #56b1ff;
                border: none;
                color: #fff;
                line-height: 33px;
            }

            .oUl li {
                float: left;
                line-height: 31px;
                border-top: 1px solid #ddd;
                cursor: pointer;
                border-left: 1px solid #ddd;
                border-right: 1px solid #ddd;
                padding: 0 15px;
                margin-right: -1px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                background: #f6f6f6;
            }

            .oMain {
                padding: 15px;
            }

            .oMain p {
                margin-bottom: 15px;
                margin-top: 10px;
            }

            .oMain p span {
                font-size: 15px;
                float: left;
                line-height: 32px;
            }

            .oMain p .form-control {
                float: left;
            }

            .oMain p .btn {
                margin-left: 8px;
            }

            .oMain .showArea {
                width: 200px;
                height: 200px;
                background: #eee;
                text-align: center;
                line-height: 200px;
                border-radius: 3px;
            }
        }
    }
</style>
